<template>
	<view class="container">
		<view>
			<u-search placeholder="输入合同号、订单号、工单号、规格"
				v-model="queryKey"
				@custom="barQueryGroupList"
				@search="barQueryGroupList"></u-search>
		</view>
		<view>
			<uni-section :title="`筛选条件`" type="line"></uni-section>
			<uni-data-checkbox multiple v-model="filterData" :localdata="filterList" style="margin-left: 13px;" @change="checkBoxChange"></uni-data-checkbox>
		</view>
		<view>
			<uni-section :title="`工单汇总`" type="line"></uni-section>
			<uni-table ref="tableOfProduct"
				border
				stripe 
				type="" 
				emptyText="暂无更多数据">
				<uni-tr style="background-color: #dbfbdb;">
					<uni-th align="center" width="60" style="font-size: 14px;color: #62c188;">排产总数量</uni-th>
					<uni-th align="center" width="60" style="font-size: 14px;color: #62c188;">已完工数量</uni-th>
					<uni-th align="center" width="60" style="font-size: 14px;color: #62c188;">未完工数量</uni-th>
					<uni-th align="center" width="60" style="font-size: 14px;color: #62c188;">金蝶入库数</uni-th>
					<uni-th align="center" width="60" style="font-size: 14px;color: #62c188;">未入库数量</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in totalList" :key="index" style="height: 45px;">
					<uni-td align="left" style="font-size: 14px;text-align: center;">{{item.totalPlanNum}}</uni-td>
					<uni-td align="left" style="font-size: 14px;text-align: center;">{{ item.totalFinishedNum }}</uni-td>
					<uni-td align="left" style="font-size: 14px;text-align: center;">{{ item.totalUnFinishedNum }}</uni-td>
					<uni-td align="left" style="font-size: 14px;text-align: center;">{{ item.kingInstockRealQty }}</uni-td>
					<uni-td align="left" style="font-size: 14px;text-align: center;">{{ item.totalUnInstockNum }}</uni-td>
				</uni-tr>
			</uni-table>
		</view>
		<uni-section :title="`明细列表`" type="line">
		</uni-section>
		<view>
			<view style="padding-left: 14rpx;">
				<uni-data-checkbox v-model="displayType" :localdata="displayTypeList" @change="displayTypeChange"></uni-data-checkbox>
			</view>
			<!-- 角色信息列表 -->
			<cxk-ntable
					:tableOpt="{stickSide:false,fontSize:14,textAlign: 'center',isShowSum: true}"
					:tableHeight="0"
					:tableData="dataList"
					:columns="columns"
					colKey="dataIndex"
					idKey="index"
					:autoSort="false"
                    :iconsButStyle="['cart','plus']"
					:showButton="['add','edit','delete']"
					@onSort="sortClick"
					@addButton="addButton"
					@editButton="editButton"
					@deleteButton="deleteButton"
					/>
		</view>
		<view style="padding-top: 20rpx;padding-bottom: 60rpx;">
			<uni-pagination 
				prevText="前一页"
				nextText="下一页"
				:page-size="pageSize" 
				:current="pageCurrent" 
				:total="total" 
				@change="change" />
		</view>
		<u-toast ref="uToast" />
	</view>
</template>
 
<script>
	
import * as workorderApi from '@/api/order/workorder';
export default {
		components: {
		},
		data() {
			return {
				queryKey: null,
				totalList: [],
				filterData: [0],
				filterList: [{
					text: '显示未完工订单',
					value: 0
				}, {
					text: '显示已完工订单',
					value: 1
				}],
				displayType: 0,
				displayTypeList: [{
					text: '订单分组展示',
					value: 0
				}, {
					text: '明细平铺展示',
					value: 1
				}],
				sortData: null,
				//列表展示的字段名
				columns: [
					{
						"title": "序号",
						"dataIndex": "index" ,
						"textAlign": 'left',
						"width": 100,
					},
					{
						"title": "排产开始日期",
						"dataIndex": "planStartdate" ,
						"textAlign": 'left',
						"width": 100,
					},
					{
						"title": "订单预计交期",
						"dataIndex": "orderPlanFinishdate" ,
						"textAlign": 'left',
						"width": 100,
					},
					{
						"title": "订单号",
						"dataIndex": "orderCode" ,
						"textAlign": 'left',
						"sort": true,
					},
					{
						"title": "合同号",
						"dataIndex": "contractCode" ,
						"textAlign": 'left',
					},
					{
						"title": "规格型号",
						"dataIndex": "bomStandard" ,
						"textAlign": 'left',
						"sort": false,
					},
					{
						"title": "业务状态",
						"dataIndex": "minKingStatusDesc" ,
						"textAlign": 'left',
						"sort": true,
					},
					{
						"title": "领料状态",
						"dataIndex": "maxKingPickStatusDesc" ,
						"textAlign": 'left',
						"sort": true,
					},
					{
						"title": "排产数量",
						"dataIndex": "planNum" ,
						"textAlign": 'left',
						"width": 100,
						"sort": true,
					},
					{
						"title": "已完工数量",
						"dataIndex": "finishedNum" ,
						"textAlign": 'left',
						"width": 100,
					},
					{
						"title": "未完工数量",
						"dataIndex": "unFinishedNum" ,
						"textAlign": 'left',
						"width": 100,
					},
					{
						"title": "已入库数量",
						"dataIndex": "kingInstockRealQty" ,
						"textAlign": 'left',
						"width": 100,
					},
					{
						"title": "产品编码",
						"dataIndex": "bomCode" ,
						"textAlign": 'left',
						"sort": true,
					},
					{
						"title": "产品名称",
						"dataIndex": "bomName" ,
						"textAlign": 'left',
					},
					{
						"title": "操作",
						"dataIndex": "rowKey",
						"textAlign": 'left',
						"width": 200
					}
				],
				//列表数据
				dataList:[
				],
				
				// 每页数据量
				pageSize: 10,
				// 当前页
				pageCurrent: 1,
				// 数据总量
				total: 0,
			}
		},
		onShow(options) {//监听页面显示，页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
		},
		onLoad () {
		},
		created() {
			this.queryTotalNumber();
			this.findGroupList();
		},
		mounted() {
		},
		methods: {
			checkBoxChange(e) {
				console.log("checkBox:", this.filterData);
				this.queryTotalNumber();
				this.findGroupList();
			},
			barQueryGroupList() {
				this.pageCurrent = 1;
				this.queryTotalNumber();
				this.findGroupList();
			},
			queryTotalNumber() {
				this.totalList = [];
				let param = {
					queryKey: this.queryKey,
					filterDataList: this.filterData,
				};
				workorderApi.queryTotalNumber(param).then(res => {
					if (res.data) {
						this.totalList.push(res.data);
					}
				}).catch(err => {
					// 提交异常
					console.error("查询统计数据发生异常", err);
				});
			},
			displayTypeChange(e) {
				console.log("displayTypeChange:", e, this.displayType);
				// if (e.detail.value === 0) {
				// 	this.findGroupList();
				// } else if (e.detail.value === 1) {
				// }
				this.findGroupList();
			},
			findGroupList() {
				let param = {
					queryKey: this.queryKey,
					pageNum: this.pageCurrent,
					pageSize: this.pageSize,
					total: this.total,
					filterDataList: this.filterData,
					sortData: this.sortData,
					displayType: this.displayType,
				};
				workorderApi.planBigPanGroupByContractList(param).then(res => {
					// console.log("查询分组数据结果:", res);
					this.dataList = res.rows || [];
					this.total = res.total || 0;
				}).catch(err => {
					// 提交异常
					console.error("查询分组数据发生异常", err);
				});
			},
			// 分页触发
			change(e) {
				console.log('change>分页, pageCurrent', e, this.pageCurrent);
				this.pageCurrent = e.current;
				this.findGroupList();
			},
			//领料
			addButton(row,col){
				console.log(row,col);
				if (row.children) {
					let orderCode = encodeURIComponent(row.orderCode);
					let contractCode = encodeURIComponent(row.contractCode);
					this.navigateTo(`/pages/work/order/pickingDetail?contractCode=${contractCode}&orderCode=${orderCode}`);
				} else {
					let orderCode = encodeURIComponent(row.orderCode);
					let contractCode = encodeURIComponent(row.contractCode);
					let bomCode = encodeURIComponent(row.bomCode);
					this.navigateTo(`/pages/work/order/pickingDetail?contractCode=${contractCode}&orderCode=${orderCode}&bomCode=${bomCode}`);
				}
			},
			navigateTo (url) {
			  uni.navigateTo({ url: url })
			},
			//补料
			editButton(row,col){
				console.log(row,col);
				// this.$refs.uToast.success(`补料功能权限需要开通`);
				if (row.children) {
					let orderCode = encodeURIComponent(row.orderCode);
					let contractCode = encodeURIComponent(row.contractCode);
					this.navigateTo(`/pages/work/order/feedMtrlDetail?contractCode=${contractCode}&orderCode=${orderCode}`);
				} else {
					let orderCode = encodeURIComponent(row.orderCode);
					let contractCode = encodeURIComponent(row.contractCode);
					let bomCode = encodeURIComponent(row.bomCode);
					this.navigateTo(`/pages/work/order/feedMtrlDetail?contractCode=${contractCode}&orderCode=${orderCode}&bomCode=${bomCode}`);
				}
			},
			//退料
			deleteButton(row,col){
				console.log(row,col);
				// this.$refs.uToast.success(`退料功能权限需要开通`);
				if (row.children) {
					let orderCode = encodeURIComponent(row.orderCode);
					let contractCode = encodeURIComponent(row.contractCode);
					this.navigateTo(`/pages/work/order/returnMtrlDetail?contractCode=${contractCode}&orderCode=${orderCode}`);
				} else {
					let orderCode = encodeURIComponent(row.orderCode);
					let contractCode = encodeURIComponent(row.contractCode);
					let bomCode = encodeURIComponent(row.bomCode);
					this.navigateTo(`/pages/work/order/returnMtrlDetail?contractCode=${contractCode}&orderCode=${orderCode}&bomCode=${bomCode}`);
				}
			},
			//自定义按钮
			allotUser(row,col){
				alert(row,col)
			},
			sortClick(item) {
				this.sortData = item;
				console.log("sortClick:", this.sortData);
				this.findGroupList();
			},
		}
	}
</script>
 
<style>
	page{
		height: 100%;
	}
	.container{
		height: 100%;
		display: flex; 
		flex-direction: column;
	}
	/* 筛选栏样式开始 */
	.filter-bar{
		/* height: 100rpx; */
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 60px;
		background-color: #fff;
		border-bottom: 1px solid #eee;
		padding: 0 10px;
		/* position: sticky; */
	}
	/* 筛选栏样式结束 */
	
	/* 数据列表样式 */
	.data-list{
		overflow-y: auto; 
		flex: 1;
		width: 100%;
	}
</style>
